<template>
  <a-form
    :model="formState"
    layout="inline"
    style="margin-bottom: 15px;"
  >
    <a-form-item label="角色名称" name="username">
      <a-input v-model:value="formQuery.username" placeholder="请选择角色类型" />
    </a-form-item>
    <a-form-item label="角色类型" name="roleType">
      <a-select style="width: 200px;" v-model:value="formQuery.type">
        <a-select-option value="">全部</a-select-option>
        <a-select-option value="10">管理员</a-select-option>
        <a-select-option value="20">会员</a-select-option>
        <a-select-option value="30">普通用户</a-select-option>
      </a-select>
    </a-form-item>
    <a-form-item label="角色状态" name="status">
      <a-select  style="width: 200px;" v-model:value="formQuery['status']" placeholder="">
        <a-select-option value="">全部</a-select-option>
        <a-select-option value="0">线下</a-select-option>
        <a-select-option value="1">线上</a-select-option>
      </a-select>
    </a-form-item>
    <a-form-item>
      <a-button type="primary" @click="search()" style="margin-right: 15px;">查询</a-button>
      <a-button type="primary" @click="showModal(formState,'add')">添加角色</a-button>
    </a-form-item>
  </a-form>
  <a-table bordered :data-source="dataSource" :columns="columns" :loading="loading">
    <template #bodyCell="{ column, record }">
      <template v-if="column.dataIndex === 'operation'">
        <a-popconfirm
          v-if="dataSource.length"
          title="确定删除?"
          @confirm="onDelete(record._id)"
        >
          <a>删除</a>
        </a-popconfirm>
        <a style="margin-left: 10px;" @click="showModal(record,'edit')">编辑</a>
        <a style="margin-left: 10px;" @click="queryRole(record.id)">详情</a>
      </template>
    </template>
  </a-table>

  <a-modal v-model:open="open" title="添加角色" ok-text="确认" cancel-text="取消" @ok="hideModal">
    <a-form :model="formState" name="basic" :label-col="{ span: 5 }" :wrapper-col="{ span: 19 }" autocomplete="off">
      <a-form-item  label="角色名称" name="roleName" :rules="[{ required: true, message: '请输入角色名称' }]">
        <a-input v-model:value="formState.roleName" />
      </a-form-item>

      <a-form-item label="角色类型" name="roleType" :rules="[{ required: true, message: '请选择角色类型' }]">
        <a-select v-model:value="formState.roleType" placeholder="请选择角色类型">
          <a-select-option value="10">管理员</a-select-option>
          <a-select-option value="20">会员</a-select-option>
          <a-select-option value="30">普通用户</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item  label="角色顺序" name="order" :rules="[{ required: true, message: '请输入顺序' }]">
        <a-input v-model:value="formState.order" />
      </a-form-item>
      <a-form-item label="角色状态" name="status" :rules="[{ required: true}]">
        <a-radio-group v-model:value="formState['status']">
          <a-radio :value="0">线下</a-radio>
          <a-radio :value="1">线上</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item  label="备注" name="status">
        <a-textarea v-model:value="formState['remark']" placeholder="备注" :rows="4" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script lang="ts" setup>
import { reactive, ref, Ref} from 'vue';
import *as RoleInfo from '../../../assets/api/role'
import { message } from 'ant-design-vue';

interface DataItem {
  id: string;
  key: string;
  name: string;
  age: number;
  address: string;
}
const columns = [
  { title: '用户ID', dataIndex: 'id', width: '15%', align:"center"},
  { title: '角色名称', dataIndex: 'roleName', align:"center"},
  { title: '角色类型', dataIndex: 'roleType', align:"center"},
  { title: '角色状态', dataIndex: 'status', align:"center"},
  { title: '创建时间', dataIndex: 'createTime', align:"center"},
  { title: '操作', dataIndex: 'operation', width: '20%', align:"center"},
];
const loading = ref(false)
const dataSource: Ref<DataItem[]> = ref([]);


let open = ref<boolean>(false);
let changeType = ref<string>('add');
// 添加角色信息
interface FormState {
  roleName: string;
  roleType: string;
  status: number | string;
  remark: string;
  order: number,
  id?: string 
}
const formState = reactive<FormState>({
  roleName: '',
  roleType: '0',
  status: -1,
  remark: '',
  order: 0,
  id: ''
});
interface Formquery {
  username: string;
  type: string | number;
  status:string | number 
}
const formQuery = reactive<Formquery> ({
  username: '',
  type: "",
  status: ''
})
const showModal = (arg: FormState, str: string) => {
  if(str === 'edit'){
    formState.id = arg.id
    formState.roleName = arg.roleName
    formState.roleType = arg.roleType
    formState.status = Number(arg.status)
    formState.remark = arg.remark
    formState.order = arg.order
  }else{
    formState.roleName = ''
    formState.roleType = ''
    formState.status =  1
    formState.remark = ''
    formState.order = 0
    formState.id = ''
  }
  changeType.value = str
  open.value = true;
};
// 添加角色
const hideModal = () => {
  let params:FormState = {
    roleName: formState.roleName,
    roleType: formState.roleType,
    status: formState.status,
    remark: formState.remark,
    order: formState.order,
  }
  if(changeType.value === 'edit'){
    params.id = formState.id
    RoleInfo.editRole(params).then(res => {
      if(res.code === 200){
        message.success(res.msg)
        getRoleList()
      }
    })
  }else{
    if(!formState.roleName){
      return message.warning('角色名称不能为空')
    }
    if(!formState.roleType){
      return message.warning('请选择角色类型')
    }
    RoleInfo.addRole(params).then(res => {
      if(res.code === 200){
        message.success(res.msg)
        getRoleList()
      }
    })
  }
  open.value = false;
};
// 获取角色列表
const getRoleList = () =>{
  loading.value = true
  let params = {
    page: 1,
    pageSize: 10,
    roleName: formQuery.username,
    status: formQuery.status ? formQuery.status: '',
    roleType: formQuery.type ? formQuery.type : ''
  }
  RoleInfo.queryRoleList(params).then(res =>{
    if(res.code === 200){
      loading.value = false
      dataSource.value = res.data?.list
    }
  })
}
getRoleList()
// 查询详情
const queryRole = (id: string) => {
  RoleInfo.queryRoleDetail(id).then(res => {
    if(res.code === 200){
      
    }
  })
}
// 搜索
const search = () => {
  getRoleList()
}

// 删除角色
const onDelete = (key: string) => {
  RoleInfo.deleteRole(key).then(res => {
    if(res.code === 200){
      message.success(res.msg)
      getRoleList()
    }
  })

};
</script>
<style lang="less" scoped>
.editable-cell {
  position: relative;
  .editable-cell-input-wrapper,
  .editable-cell-text-wrapper {
    padding-right: 24px;
  }

  .editable-cell-text-wrapper {
    padding: 5px 24px 5px 5px;
  }

  .editable-cell-icon,
  .editable-cell-icon-check {
    position: absolute;
    right: 0;
    width: 20px;
    cursor: pointer;
  }
  .editable-cell-icon {
    margin-top: 4px;
    display: none;
  }
  .editable-cell-icon-check {
    line-height: 28px;
  }

  .editable-cell-icon:hover,
  .editable-cell-icon-check:hover {
    color: #108ee9;
  }

  .editable-add-btn {
    margin-bottom: 8px;
  }
}
.editable-cell:hover .editable-cell-icon {
  display: inline-block;
}
</style>
